---
title: Meta Pixel
description: Track conversions and build audiences for Facebook and Instagram advertising campaigns.
lastModified: 2025-09-24

icon: meta
---

Meta Pixel (formerly Facebook Pixel) is Meta's conversion tracking and audience targeting tool for Facebook and Instagram advertising. It tracks user actions, measures ad effectiveness, builds custom audiences, and optimizes ad delivery. By default, c15t loads this script based on `marketing` consent.

This script persists after consent is revoked because it has built-in consent management. When consent changes, c15t updates Meta's internal consent state rather than removing the script entirely.

### Adding the Meta Pixel to c15t

<Tabs items={['JavaScript', 'React', 'Next.js + App Router', 'Next.js + Pages Router']}>
  <Tab value="JavaScript">
    ```ts
    import { metaPixel } from '@c15t/scripts/meta-pixel';

    configureConsentManager({
      // ... 
      scripts: [
        metaPixel({
          pixelId: '123456789012345',
        }),
      ],
    });
    ```
  </Tab>

  <Tab value="React">
    ```tsx
    import { metaPixel } from '@c15t/scripts/meta-pixel';
    import { ConsentManagerProvider } from '@c15t/react';

    export function App({ children }: { children: React.ReactNode }) { 
      return (
        <ConsentManagerProvider
          options={{
            scripts: [
              metaPixel({
                pixelId: '123456789012345',
              }),
            ],
          }}
        >
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js + App Router">
    ```tsx
    'use client';
    import { metaPixel } from '@c15t/scripts/meta-pixel';
    import { ClientSideOptionsProvider } from '@c15t/nextjs/client';

    export function ConsentManagerClient({ children }: { children: React.ReactNode }) { 
      return (
        <ClientSideOptionsProvider
          scripts={[
            metaPixel({
              pixelId: '123456789012345',
            }),
          ]}
        >
          {children}
        </ClientSideOptionsProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js + Pages Router">
    ```tsx
    import { metaPixel } from '@c15t/scripts/meta-pixel';
    import { ConsentManagerProvider } from '@c15t/nextjs';

    export function App({ children }: { children: React.ReactNode }) { 
      return (
        <ConsentManagerProvider
          options={{
            // ... other options
            scripts: [
              metaPixel({
                pixelId: '123456789012345',
              }),
            ],
          }}
        >
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>
</Tabs>

## metaPixelEvent

You can use the `metaPixelEvent` function to track events. This is a wrapper around the `fbq` function that the Meta Pixel script uses.

To learn more about Meta Pixel's standard events, see the [Meta Pixel documentation](https://developers.facebook.com/docs/meta-pixel/reference).

```ts
import { metaPixelEvent } from '@c15t/scripts/meta-pixel';

metaPixelEvent('Purchase', { value: 10.0, currency: 'USD' });
```

## Types

### MetaPixelOptions

<AutoTypeTable path="./packages/scripts/src/meta-pixel.ts" name="MetaPixelOptions" />

### Script

<AutoTypeTable path="./packages/core/src/libs/script-loader/types.ts" name="Script" />

### StandardEventParams

<AutoTypeTable path="./packages/scripts/src/meta-pixel.ts" name="StandardEventParams" />
